<script>
    // 成员模态表单页
    Vue.component('buy-vip-dialog', {
        template: `
<el-dialog :visible.sync="dialogShow" width="788px" top="5vh"  custom-class="buy_vip" @close="closeModal">
    <div class="buy_vip_view">
        <div class="buy_vip_title_view">
            <img src="/public/images/huiyuan_dialog.png" style="width:40px;height:40px"/>
            <img src="/public/images/vip_text_icon.png" style="width:109px;height:18px"/>
            <div style="flex:1"></div>
            <img src="/public/images/dialog_close_icon.png" style="width:40px;height:40px" @click="closeModal"/>
        </div>

        <div style="width:740px;height:488px;background-color:#FFF;margin:0 auto;border-radius:12px">
            <div class="title_tip_tyext">请选择最适合你的会员类型</div>
            <div style="height:130px;display:flex;align-items:center;padding-left:20px;padding-right:20px;justify-content:space-between">

                <div v-for="item in vips" @click="changeMoney(item)">
                     <img :src="'/public/images/'+item+'.png?version=1'"  style="width:220px;height:100px" v-if="money != item"/>
                     <img :src="'/public/images/'+item+'se.png?version=1'"  style="width:220px;height:100px" v-else-if="money == item"/>
               </div>
            </div>
            <div style="text-align:center">
                <img src="/public/images/huiyuanquanyi.png?version=1" style="width:700px;height:178px;margin:0 auto"/>
            </div>

            <div style="height:36px"></div>

            <div class="btn_success" @click="pay()">
                同意并且支付
            </div>

            <div style="margin-top:16px;padding-left:20px;">
                <input type="checkbox" value="1" v-model="check"><span style="font-size:12px;color:#999999;margin-left:10px">已经阅读并同意 <span style="color:#8C652C"><a href="https://www.gongsizhang。com/index.php/index/user-text">《会员协议》</a></span>  </span>
            </div>

        </div>





    </div>
</el-dialog>
    `,
        props: ['dialog-show','form-row'],
        computed: {
            currentTallyId() {
                return this.$store.state.currentTallyId
            },
            currentTally () {
                return this.$store.state.currentTally
            },
            userData () {
                return this.$store.state.userData
            },
        },
        watch: {
            dialogShow:{
                handler (newVal) {},
                deep:true,
                immediate: true
            },
            formRow: {
                handler (newVal) {
                    this.memberForm = newVal
                },
                deep:true
            }
        },
        data:function() {
            return {
                check:0,
                money:888,
                vips:[360,888,1288],
                memberForm:{},
                memberRules:{
                    serial_number: [
                        { required: true, message: '请输入兑换码', trigger: 'blur' }
                    ],
                },
            }
        },
        methods: {
            pay(){
                this.check = 1;
                let vip_index = 1;
                if(this.money == 360){
                    vip_index = 0;
                }else if(this.money == 888){
                    vip_index = 1;
                }else if(this.money == 1288){
                    vip_index = 2;
                }

                axios.post('/api/tally/qrcode-ali',{
                    'tally_id':this.currentTallyId,
                    'vip_index':vip_index
                },{
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status === 'success'){
                        document.querySelector("body").innerHTML = res.data.data.form;
                        document.forms[0].submit();
                    }else{
                        that.$message({
                            type: 'error',
                            message: '解析数据失败:'+res.data.error_message
                        })
                    }
                })
            },
            closeModal() {
                this.$emit('modalClose')
            },
            handleMemberForm() {

            },
            changeMoney(money){
                if(this.money != money){
                    this.money = money
                }
            }
        }
    })
</script>
<style scoped>
    .buy_vip .el-dialog__header{
        display: none;!important;
    }
    .buy_vip{
        background-color: transparent;!important;
        box-shadow: 0 0 0px rgba(0,0,0,.3);
    }
    .buy_vip .el-dialog__body{
        padding: 0;
    }
    .buy_vip_view{
        height: 580px;
        background-image: url("/public/images/vip_dialog.png");
        background-repeat: no-repeat;
        background-size: cover;
    }
    .btn_success{
        width: 700px;
        height: 52px;
        background: linear-gradient(119deg, #FED879 0%, #FCAF55 100%);
        box-shadow: 0px 4px 8px 0px rgba(207,138,56,0.08);
        border-radius: 8px 8px 8px 8px;
        opacity: 1;
        font-size: 18px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        text-align: center;
        line-height: 52px;
        margin: 0 auto;
    }
    .buy_vip_title_view{
        height: 68px;
        display: flex;
        align-items: center;
        padding-left: 24px;
        padding-right: 24px;
    }
    .title_tip_tyext{
        height: 49px;
        line-height: 49px;
        padding-left: 24px;
        font-size: 12px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #929292;
    }
</style>
